<template>
	<div id="app">
		<el-form class="form" label-position="top">
			<el-row :gutter="40" class="other">
				<slot></slot>
				<template v-if="mode!='preview'">
					<el-col :span="4">
						<div class="grid-content bg-purple">
							<el-form-item label="做任务限时,分钟">
								<div class="disbox">
									<el-input class="disflex"></el-input>
									<el-switch :value="false" class="elSwitch" v-if="mode=='systemTemplate'"></el-switch>
								</div>
							</el-form-item>
						</div>
					</el-col>
					<el-col :span="4">
						<div class="grid-content bg-purple">
							<el-form-item label="派单人审核时间,分钟">
								<div class="disbox">
									<el-input class="disflex"></el-input>
									<el-switch :value="false" class="elSwitch" v-if="mode=='systemTemplate'"></el-switch>
								</div>
							</el-form-item>
						</div>
					</el-col>
					<el-col :span="4">
						<div class="grid-content bg-purple">
							<el-form-item label="任务截至过期,小时">
								<div class="disbox">
									<el-input class="disflex"></el-input>
									<el-switch :value="false" class="elSwitch" v-if="mode=='systemTemplate'"></el-switch>
								</div>
							</el-form-item>
						</div>
					</el-col>
					<el-col :span="4">
						<div class="grid-content bg-purple">
							<el-form-item label="可接设备">
								<div class="disbox">
										<el-checkbox-group :value="['苹果','安卓']" class="disflex">
											<el-checkbox label="苹果"></el-checkbox>
											<el-checkbox label="安卓"></el-checkbox>
									</el-checkbox-group>
									<el-switch :value="false" class="elSwitch" v-if="mode=='systemTemplate'"></el-switch>
								</div>
							</el-form-item>
						</div>
					</el-col>
				</template>
			</el-row>
		</el-form>
		<div class="step">
			<div class="title titles">做任务的步骤（给接单人看的）</div>
			<div class="stepBlock clearfix" v-for="(prop,i) in taskParm.custom_steps" :key="i">
				<i>{{i+1}}</i>
				<div class="info">
					<div class="stepBlockTitle">
						第{{parseChina(i+1)}}步
						<i v-if="JSON.stringify(prop).indexOf('Collect')!=-1">有收集</i>
						<el-dropdown class="moreRight" v-if="mode!='preview'">
							<span class="el-dropdown-link">
								<img src="../../../static/img/moreCenter.png" />
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item>添加介绍文字</el-dropdown-item>
								<el-dropdown-item>添加示例图/视频</el-dropdown-item>
								<el-dropdown-item>添加可操作的按钮</el-dropdown-item>
								<el-dropdown-item>收集用户文字</el-dropdown-item>
								<el-dropdown-item>收集用户图片</el-dropdown-item>
								<el-dropdown-item>删除本列</el-dropdown-item>
								<el-dropdown-item>上移</el-dropdown-item>
								<el-dropdown-item>下移</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
					<div v-if="prop.length<=0">
						<div class="noSelect">请点击右边小圆点选择步骤内容</div>
					</div>
					<div v-else v-for="(item,index) in prop" :key="index">
						<div class="stepTextarea" v-if="item.type=='Description'">
								<i class="closeStep" @click="prop.splice(index,1)" v-if="mode!='preview'"></i>
								<el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="item.value"></el-input>
						</div>
						<div class="imgVideoList clearfix" v-if="Array.isArray(item)">
							<div v-for="(a,ai) in item" :key="ai">
									<div class="item up" v-if="a.type=='Gallery'">
										<img :src="isFile(a.uri)=='video'?video2:isFile(a.uri)=='photo'?a.uri:''" />
										<div class="btn">
											<a @click="openFile(a.uri)" :style="{'height':(mode!='preview'?'':'101%')}">{{isFile(a.uri)=='video'?'播放视频':isFile(a.uri)=='photo'?'放大':''}}</a>
											<a @click="if(item.length==1){prop.splice(index,1)}else{item.splice(ai,1)}">删除</a>
										</div>
									</div>
									<template v-if="a.type=='CollectGallery'">
											<div class="item collectImg">
													<span>收集<br />用户的截图</span>
													<font color="#3DA1FF" @click="if(item.length==1){prop.splice(index,1)}else{item.splice(ai,1)}" v-if="mode!='preview'">删除</font>
											</div>
									</template>
							</div>
						</div>
						<div class="collectText" v-if="item.type=='CollectTextInfo'">
							<h3>收集用户的：</h3>
							<div class="inputs" :data-clipboard-text="item.placeholder">
									<i class="closeStep" @click="prop.splice(index,1)" v-if="mode!='preview'"></i>
									<el-input placeholder="请输入收集用户的资料,例如:QQ号码" v-model="item.placeholder"></el-input>
							</div>
						</div>
						<div class="linkBlock" v-if="item.type=='Operable'">
							<i class="closeStep" @click="prop.splice(index,1)" v-if="mode!='preview'"></i>
							<div class="textBlock disbox">
								<el-select v-model="item.target.type" class="select" placeholder="请选择" style="width:180px;">
									<el-option :value="b.name" v-for="(b,bi) in operable" :key="bi" :label="b.name">
									</el-option>
								</el-select>
								<div class="inputs disflex copy_btn" :data-clipboard-text="item.target.value">
									<el-input :placeholder="'请输入' + item.target.type" v-model="item.target.value"></el-input>
								</div>
							</div>
							<div class="needBtn clearfix">
								<h3>操作内容</h3>
								<div v-for="(a,ai) in operable" :key="ai">
									<template v-if="(a.name==item.target.type)">
										<a class="btn" v-for="(b,bi) in a.list" :key="bi">{{b.app_name}}</a>
										<div v-if="a.list.length==0" class="noBtns">暂无任何操作</div>
									</template>
								</div>
								<div v-if="(operable.findIndex((oitem)=>item.target.type==oitem.name))==-1" class="noBtns">当前选择的类型于服务器不匹配（可能是后台删除了xx类型导致的）</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="nor" :class="taskParm.custom_steps.length<=0?'no':''">
			<template v-if="taskParm.custom_steps.length<=0">暂无步骤，</template>
			<a class="addStep blue" @click="taskParm.custom_steps.push([])" v-if="mode!='preview'">添加步骤</a>
		</div>
	</div>
</template>

<script>
import md5 from "js-md5";
import ClipboardJS from "clipboard";
import nzh from "nzh";
export default {
	props: {
		mode: String, //systemTemplate代表系统模板    userTemplate代表用户模板    edit普通编辑模式     preview普通预览模式
		taskParm: Object,
	},
	data() {
		return {
			operable: [],
		}
	},
	methods: {
		parseChina(num) {
			//将数字转换为大写语文
			return nzh.cn.encodeS(num);
		},
		openFile(url) {
			//打开文件
			open(url, "_blank");
		},
		parseChina(num) {
			//将数字转换为大写语文
			return nzh.cn.encodeS(num);
		},
	},
	mounted() {
		console.log(this.taskParm.custom_steps);
	}
}
</script>
<style lang="scss" scoped>
.titles{
	margin-top:25px;
	margin-bottom:12px;
	font-size:19px;
}
.elSwitch{
	margin-left:18px;
}
.addStep {
	font-size: 14px;
	margin-top: 20px;
	display: inline-block;
	cursor: pointer;
}
.nor {
	text-align: right;
}
.no {
	font-size: 15px;
	color: #a4a4a4;
	margin-bottom: 15px;
	text-align: left;
}
.stepBlock {
		margin-top: 30px;
		& > i {
				float: left;
				background: #f7ca8a;
				color: #000;
				width: 25px;
				height: 25px;
				line-height: 25px;
				text-align: center;
				border-radius: 50%;
				font-style: normal;
				font-size: 13px;
		}
		.info {
				float: left;
				width: calc(100% - 25px);
				padding-left: 20px;
				.stepBlockTitle {
						font-size: 16px;
						height: 25px;
						line-height: 25px;
						position:relative;
						i {
								background: #f30;
								color: #fff;
								font-style: normal;
								font-size: 13px;
								padding: 5px 11px;
								border-radius: 30px;
								margin-left: 20px;
								vertical-align: middle;
								margin-top: -2px;
						}
						img {
								float: right;
								height: 23px;
								cursor: pointer;
								padding: 9px 0;
						}
				}
				.noSelect {
						color: #c2c2c2;
						line-height: 35px;
						margin-top: 10px;
						font-size: 15px;
						font-weight: 300;
				}
				.stepTextarea {
						display: block;
						width: 100%;
						margin-top: 26px;
						position: relative;
						textarea {
								font-size: 15px;
								padding: 10px 15px;
								line-height: 30px;
						}
				}
				.collectText {
						margin-top: 15px;
						& > h3 {
								font-weight: 300;
								height: 35px;
								line-height: 35px;
								margin-bottom: 10px;
								font-size: 15px;
						}
						& > .inputs {
								position: relative;
						}
				}
				.imgVideoList {
						margin-top: 25px;
						margin-bottom: -10px;
						.item {
								float: left;
								margin-right: 20px;
								margin-bottom: 20px;
								position: relative;
								width: 160px;
								height: 160px;
								&.up {
										img {
												display: block;
												width: 100%;
												height: 100%;
										}
										.btn {
												position: absolute;
												top: 0;
												left: 0;
												width: 100%;
												height: 100%;
												background: rgba(0, 0, 0, 0.3);
												a {
														cursor: pointer;
														display: block;
														width: 100%;
														text-align: center;
														display: flex;
														justify-content: center;
														align-items: center;
														flex-direction: column;
														font-weight: 300;
														height: 50%;
														color: #fff;
														font-size: 15px;
														position: relative;
														&:nth-child(1):after {
																position: absolute;
																width: 50%;
																background: #fff;
																height: 1px;
																left: 25%;
																bottom: 0;
																content: " ";
														}
												}
										}
								}
								&.collectImg {
										border: 1px dashed #eeeeee;
										background: #f9f9f9;
										font-weight: 300;
										color: #b4b4b4;
										text-align: center;
										line-height: 35px;
										display: flex;
										justify-content: center;
										align-items: center;
										flex-direction: column;
										font-size: 15px;
										font {
												cursor: pointer;
										}
								}
						}
				}
				.linkBlock {
						position: relative;
						background: #f6f6f6;
						padding: 18px;
						margin-top: 25px;
						.textBlock {
								.select {
										height: 38px;
										display: block;
										font-weight: 300;
										line-height: 38px;
										text-align: center;
										font-size: 15px;
										color: #000;
										div {
												overflow: hidden;
												img {
														width: 15px;
														margin-left: 10px;
														vertical-align: middle;
												}
										}
								}
								.inputs {
										margin-left: 15px;
										height: 38px;
										position: relative;
										text-align: center;
										input {
												display: block;
												width: 100%;
												height: 38px;
												font-weight: 300;
												font-size: 15px;
												line-height: 20px;
												padding: 9px 15px;
										}
								}
						}
						.needBtn {
								background: #fff;
								margin-top: 30px;
								position: relative;
								padding: 20px;
								h3 {
										font-weight: 300;
										position: absolute;
										height: 40px;
										line-height: 40px;
										top: -20px;
										left: 20px;
										font-size: 15px;
								}
								.btn {
										font-weight: 300;
										margin-top: 15px;
										float: left;
										color: #1e1e1e;
										border: 1px solid #ececec;
										border-radius: 4px;
										padding: 0 20px;
										margin-right: 15px;
										font-size: 14px;
										height: 30px;
										line-height: 28px;
										img {
												width: 12px;
												vertical-align: middle;
												margin-top: -2px;
												margin-left: 10px;
										}
								}
						}
				}
		}
}
.noBtns {
		font-size: 15px;
		margin-top: 7px;
		color: #c5c5c5;
}
.moreRight{
	vertical-align: middle;
	float:right;
}
.closeStep {
		background: url("../../../static/img/closeStep.png") no-repeat center center;
		position: absolute;
		right: -10.5px;
		top: -10.5px;
		width: 21px;
		height: 21px;
		border-radius: 50%;
		background-size: 100%;
		z-index: 1;
		cursor: pointer;
}
</style>